<template>
	<view class="detail">
		<view v-if="detail.companyName" class="info">
			<view class="info-left">
				<view class="tit">{{detail.companyName}}</view>
				<view class="desc">
					{{detail.cityName}}/{{detail.industry | codeFilter('STU_INDUSTRY')}}/{{detail.companyCategory |codeFilter('STU_COMPANY_CATEGORY')}}
				</view>
			</view>
			<image :src="detail.logo" class="info-right" />
		</view>

		<view v-if="!loading" class="content">
			<me-tabs :height="100" v-model="tabIndex" :tabs="tabs"></me-tabs>

			<view v-if="tabIndex === 0">
				<view @click="toDetail(item)" :key="index" v-for="(item, index) in list" class="list">
					<view class="list-left">
						<view class="name">{{item.name}}</view>
						<view class="tag">
							{{item.address}} / {{item.education | codeFilter('STU_EDUCATION')}} /
							{{item.experience | codeFilter('STU_EXPERIENCE')}}
						</view>
					</view>
					<view class="list-right">
						<view class="price">
							{{(item.moneyStart)|price}}-{{item.moneyEnd|price}}
						</view>
						<view class="time">
							{{item.createTime | timeFormat('MM-dd')}}发布
						</view>
					</view>
				</view>
			</view>
			<view class="company-desc" v-if="tabIndex === 1">
				<view class="title">公司介绍</view>

				<view class="desc">
					<rich-text :nodes="detail.natureOfBusiness"></rich-text>
				</view>
				<view class="title">公司地址</view>
				<view class="desc">{{detail.proviceName}}{{detail.cityName}}{{detail.areaName}}{{ detail.address }}
				</view>
			</view>
		</view>
		<Loading v-if="loading"></Loading>
	</view>
</template>

<script>
	import {
		curriculumById,
		endVideo,
		startVideo
	} from '@/services/curriculum.js';
	import MescrollItem from '@/components/course/CourseItem.vue';
	import MeTabs from '@/components/me-tabs/me-tabs.vue';
	import {
		getCompanyById,
		getRecruitByCompanyId
	} from '@/services/company.js'
	export default {
		components: {
			MeTabs
		},

		filters: {
			price(value) {
				return (value / 1000).toFixed() + 'k'
			}
		},
		data() {
			return {
				videoPath: '',
				playingIndex: -1,
				loading: false,
				detail: {},
				tabs: [{
					name: '在招职位'
				}, {
					name: '公司介绍'
				}],
				list: [],
				tabIndex: 0
			};
		},
		onLoad({
			id
		}) {
			this.id = id;
			this.getDetail();
			this.getRecruitByCompanyId()
		},
		methods: {
			toDetail(item) {
				uni.setStorageSync('recruit', item)

				uni.navigateTo({
					url: '/pages/company/recruit/index'
				})
			},
			async getDetail() {
				this.loading = true;
				this.detail = await getCompanyById({
					companyId: this.id
				});
				this.loading = false;
			},
			async getRecruitByCompanyId() {
				const {
					rows
				} = await getRecruitByCompanyId({
					companyId: this.id
				})
				this.list = rows
			},
			playVideo(item, index) {
				this.videoPath = item.videoPath;
				this.playingIndex = index;
			},
			onVideoEnd() {
				endVideo({
					curriculumVideoId: this.detail.stuCurriculumVideos[this.playingIndex].curriculumId
				});
			},
			onVideoPlay() {
				startVideo({
					curriculumVideoId: this.detail.stuCurriculumVideos[this.playingIndex].curriculumId
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.detail {
		background-color: #f8f8f8;
		min-height: 100vh;

		.info {
			background-color: #fff;
			padding: 10rpx 30rpx 50rpx;
			display: flex;

			.info-left {
				flex: 1;

				.tit {
					font-size: 42rpx;
					font-weight: bold;
				}

				.desc {
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #8c8c8c;
				}
			}

			.info-right {
				height: 100rpx;
				width: 100rpx;
			}
		}

		.see {
			padding: 20rpx;
			font-size: 28rpx;
			color: #717070;

			text {
				color: #515151;
				margin-left: 10rpx;
			}
		}
	}

	.content {
		margin-top: 20rpx;
		background-color: #fff;
		// padding-bottom: 60rpx;
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		border-top: 1rpx spild #8a8a8a;
		border-radius: 10rpx;
		height: 110rpx;

		image {
			height: 32rpx;
			width: 32rpx;
			margin-right: 20rpx;
		}

		.list-left {
			.name {
				font-size: 34rpx;
			}

			.tag {
				font-size: 28rpx;
				margin-top: 16rpx;
				color: #8a8a8a;
			}
		}

		.list-right {
			width: 150rpx;
			color: #8a8a8a;
			text-align: right;
			font-size: 26rpx;


			.price {
				font-size: 34rpx;
				color: #dd524d;
			}

			.time {
				margin-top: 20rpx;
			}
		}
	}


	.company-desc {
		background-color: #fff;
		padding-bottom: 400rpx;
		padding: 30rpx;

		.title {
			text-align: center;
			padding: 40rpx 0;
			font-size: 32rpx;
			font-weight: 700;
		}

		.desc {
			color: #8a8a8a;
		}
	}
</style>
